<template>
  <div @dragover="ondragover()" @drop="ondrop()" class="controlBox">
    <Render :option="page" v-if="page" />
  </div>
</template>

<script>
import Render from "@/components/Render";
import { mapGetters, mapMutations } from "vuex";
import UnitViewHandle from "@/plugins/UnitViewHandle";

export default {
  name: "Control",
  components: { Render: Render },
  computed: {
    ...mapGetters(["page"])
  },
  provide: function() {
    // todo
    return {
      getMap: this.getMap
    };
  },
  created() {
    // todo 👆会修改props

    /**
     * 监听组件树中收到的拖拽通知
     * 数据结构
     * {
     * 		key, // 拖拽被放置的组件的key
     * 		data, // 拖拽过来的组件
     * }
     */
    this.$on("putChild", ({ key, data }) => this.addView(key, data));
  },
  methods: {
    ...mapMutations(['pushView']),
    // 最上层监听
    ondrop() {
      event.preventDefault();
      event.stopPropagation();
      let data = JSON.parse(event.dataTransfer.getData("dragInfo"));
      this.addView(this.page.key, data)
    },
    // 默认情况下，数据/元素不能放置到其他元素中。
    // 如果要实现改功能，我们需要防止元素的默认处理方法。
    // 我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件。
    ondragover() {
      event.preventDefault();
    },
    // 添加组件
    addView(key, data) {
      this.pushView({ key, data })
    },
  }
};
</script>

<style>
.controlBox {
  width: 100%;
  height: 100%;
}
</style>